<template>
  <a-modal
    :visible="visible"
    title="教室信息"
    :width="700"
    okText="保存"
    @cancel="() => { $emit('cancel') }"
    @ok="saveForm"
  >
    <a-form :form="form">
      <a-row>
        <a-col :md="24" :sm="24">
            <a-form-item label="学年"
            :labelCol="{span: 3,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}">
              <a-select disabled v-decorator="['xn',{rules: [{ required: true, message: '请输入第几周!' }],}]">
                <a-select-option v-for="i in TYPE0125" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
            </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
              <a-form-item label="学期"
              :labelCol="{span: 3,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}">
                <a-select disabled v-decorator="['xqm',{rules: [{ required: true, message: '请输入第几周!' }],}]">
                  <a-select-option v-for="i in TYPE0072" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
              <a-form-item label="占用时间"
              :labelCol="{span: 3,offset: 1}"
              :wrapperCol="{span: 15, offset: 1}">

                <a-input-group compact>
                  <a-input style="width: 50%" default-value="mysite" v-decorator="['zyzZs',{rules: [{ required: true, message: '请输入第几周!' }],}]" @change="queryClassroom">
                    <div slot="addonBefore">第</div>
                    <div slot="addonAfter">周</div>
                  </a-input>
                  <a-select style="width: 50%" v-decorator="['week',{rules: [{ required: true, message: '请选择周几!' }],}]" @change="queryClassroom">
                    <a-select-option v-for="i in TYPE0344" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                  </a-select>
                </a-input-group>
              </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            label="开始节课"
            :labelCol="{span: 3,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['kskj',
              {
                rules: [{ required: true, message: '请选择开始节课!' }],
              }]" @change="queryClassroom">
              <a-select-option v-for="i in 10" :key="i" :value="i">{{ i }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            label="结束节课"
            :labelCol="{span: 3,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['jskj',
              {
                rules: [{ required: true, message: '请选择结束节课!' }],
              }]" :disabled="showOnly" @change="queryClassroom">
              <a-select-option v-for="i in 10" :key="i" :value="i">{{ i }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="占用院系"
                       :labelCol="{span: 3,offset: 1}"
                       :wrapperCol="{span: 15, offset: 1}">
            <a-select :disabled="this.selectMenu.yxList.length==1" :allowClear="true" showSearch
                      optionFilterProp="children"
                      v-decorator="['yx',{rules: [{ required: false, message: '请选择占用院系!' }],}]">
              <a-select-option v-for="i in this.selectMenu.yxList " :key="i.id" :value="i.dwh">{{i.dwh+'-'+i.dwmc }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            label="所在校区"
            :labelCol="{span: 3,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['jsxq',
              {
                rules: [{ required: true, message: '请选择所在校区!' }],
              }]" :disabled="showOnly" @change="queryClassroom">
              <a-select-option v-for="i in selectMenu.campusList" :key="i.id" :value="i.xqbh">{{ i.xqmc }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            label="教室类型"
            :labelCol="{span: 3,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['typeCode',
              {
                rules: [{ required: true, message: '请选择教室类型!' }],
              }]" :disabled="showOnly" @change="queryClassroom">
              <a-select-option v-for="i in TYPE0046" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            label="教室名称"
            :labelCol="{span: 3,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['classroomRoomId',
              {
                rules: [{ required: true, message: '请选择教室名称!' }],
              }]" :disabled="showOnly" mode="tags" @change="jsChange" :filterOption="filterOption">
              <a-select-option v-for="i in selectMenu.classroomNo" :key="i.id" :dataItem="i" :value="i.id">{{ i.classroomNo }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :md="12" :sm="24">
          <a-form-item
            label="教室位置"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
           >
            <a-input v-decorator="['location',
              {
                rules: [{ required: true, message: '请输入教室位置!' }],
              }]" :disabled="showOnly"/>
          </a-form-item>
        </a-col> -->
        <a-col :md="24" :sm="24">
          <a-form-item
            label="位置容量"
            :labelCol="{span: 3,offset: 1}"
            :wrapperCol="{span: 19, offset: 1}"
          >
            <!-- <a-textarea/> -->
            <div>
              <p style="height:20px;line-height:20px;margin-bottom:5px" v-for="(item,index) in jsrl" :key="index">{{item.classroomNo}} 位置:{{item.location}} 容量:{{item.capacity}}</p>
            </div>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item
            label="用途"
            :labelCol="{span: 3,offset: 1}"
            :wrapperCol="{span: 18, offset: 1}"
          >
            <a-textarea v-decorator="['note']" :disabled="showOnly"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: ['visible', 'editId'],
  data () {
    return {
      form: this.$form.createForm(this),
      showOnly: false,
      jsrl:[],
      selectMenu : {
          yxList: [],
          campusList: [],
          classroomNo:[]
        }
    }
  },
  computed: {
    ...mapState({
      TYPE0046: state => state.app['TYPE0046'],
      TYPE0125: state => state.app['TYPE0125'],
      TYPE0072: state => state.app['TYPE0072'],
      TYPE0344: state => state.app['TYPE0344'],

    })
  },
  watch:{
    visible(){
      if(!this.visible){
        this.jsrl = []
      }
    }
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0046')
    this.$store.dispatch('app/setDictionary', 'TYPE0072')
    this.$store.dispatch('app/setDictionary', 'TYPE0125')
    this.$store.dispatch('app/setDictionary', 'TYPE0344')
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll(),
        this.$api.base.campusAll(),
        this.$store.dispatch('app/sysInfo')
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yxList: res[0].data,
          campusList: res[1].data
        }
        if (this.selectMenu.yxList.length == 1) {
          this.form.setFieldsValue({yx: this.selectMenu.yxList[0].dwh});
        }
        this.$nextTick(() => {
          this.form.setFieldsValue({xqm: res[2].currentSemester, xn: res[2].schoolYear})

        })


      })
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    jsChange(ids,vnode){
      this.jsrl = vnode.map( item => {
        console.log(item.data.attrs.dataItem)
         return item.data.attrs.dataItem
      })
      console.log( this.jsrl )
    },
    queryClassroom(){
      this.$nextTick(()=>{
          this.form.validateFields(['xn','xqm','typeCode','jsxq','jskj','kskj','week','zyzZs'],(err, values) => {
              console.log(err,'------',values)
            if (err) {
              return
            }
            values.id = this.editId ? this.editId : ''
            this.$api.cultivate.zyClassroom(values).then(res => {
              this.selectMenu.classroomNo = res.data
              this.$forceUpdate()
            })
          })
      })

    },
    fillForm (data) {
      let keys = Object.keys(this.form.getFieldsValue())
      let obj = {}
      keys.forEach(key => {
        if(data[key]){
          obj[key] = data[key]+""
        }
      })
      console.log(obj)
      this.form.setFieldsValue(obj)
    },
    saveForm () {
      if (this.showOnly) {
        this.$emit('cancel')
      }
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        // let apiFn = this.editId ? 'classroomUpdate' : 'classroomAdd'
        values.id = this.editId ? this.editId : ''
        this.$api.cultivate.zyClassroomSave(values).then(res => {
          this.$message.success = res.msg
          this.$emit('cancel')
          this.$emit('refresh')
        })
      })
    }
  }
}
</script>

<style>

</style>
